<template>
  <div class="newlyincreased">
    <div class="header">
      <div class="header-1">
        <div class="header-1-1">
          <div class="tou"></div>
          <span>查询条件</span>
        </div>
      </div>
      <el-form style="margin-left: 20px; diaplay: flex" size="mini" :inline="true" :model="Thequery" class="invoice">
        <div class="invoice-1">
          <span class="invoice-9">工单号</span>
          <el-input onkeyup="this.value=this.value.replace(/[\u4E00-\u9FA5]/g,'')" style="width: 120px"
            v-model="Thequery.caseId" size="mini"></el-input>
        </div>
        <div class="invoice-1">
          <span class="invoice-9">状态 </span>
          <el-select clearable v-model="Thequery.caseStatus" size="mini" placeholder="请选择" style="width: 120px">
            <el-option v-for="item in condition" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </div>
        <div class="invoice-1">
          <span class="invoice-9">时间范围</span>
          <el-date-picker value-format="yyyy-MM-dd" size="mini" style="width: 140px" v-model="CX.date1" type="date"
            placeholder="选择日期">
          </el-date-picker>
          <span class="invoice-9">至 </span>
          <el-date-picker :value-format="format" size="mini" style="width: 140px" v-model="CX.date2" type="date"
            placeholder="选择日期">
          </el-date-picker>
        </div>
        <div class="invoice-1">
          <span class="invoice-9">订单号 </span>
          <el-form-item>
            <el-input onkeyup="this.value=this.value.replace(/[\u4E00-\u9FA5]/g,'')" style="width: 120px" size="mini"
              v-model="Thequery.orderId"></el-input>
          </el-form-item>
        </div>
        <div class="invoice-1">
          <span class="invoice-9">工单类型 </span>
          <el-select clearable v-model="Thequery.orderType" size="mini" placeholder="请选择" style="width: 120px">
            <el-option v-for="item in mold" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </div>
        <div class="invoice-2">
          <el-button style="color: #fff; width: 110px" type="primary" size="mini" @click="getbackGuaranteeCquery">查询
          </el-button>
        </div>
      </el-form>
      <el-form style="margin-left: 20px" size="mini" :inline="true" :data="Thequery" :model="Thequery" class="invoice">
        <!-- <div class="invoice-1">
          <span class="invoice-9">手机号</span>
          <el-input
            onkeyup="this.value=this.value.replace(/[\u4E00-\u9FA5]/g,'')"
            style="width: 120px"
            v-model="Thequery.phone"
            size="mini"
          ></el-input>
        </div> -->
        <!-- <div class="invoice-1">
          <span class="invoice-9">会员id</span>
          <el-input
            onkeyup="this.value=this.value.replace(/[\u4E00-\u9FA5]/g,'')"
            style="width: 120px"
            v-model="Thequery.customerId"
            size="mini"
          ></el-input>
        </div> -->
      </el-form>
      <div class="hackhome"></div>
      <!-- 新增 -->
      <el-dialog title="工单管理-创建工单" :visible.sync="dialogVisible" :close-on-click-modal="false" width="55%">
        <div class="add">
          <div class="header-1">
            <div class="header-1-1-1">
              <div class="tou"></div>
              <span>创建工单</span>
            </div>
          </div>
          <el-form style="margin-left: 20px" size="mini" :inline="true" :model="create" class="pop" ref="create"
            :rules="CreateWorkOrder">
            <el-form-item label="会员手机" prop="memberCellPhone" label-width="80px">
              <el-input style="width: 120px" size="mini" v-model="create.memberCellPhone"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="getnameAndPhone">查询手机号</el-button>
            </el-form-item>

            <!-- <el-form-item label="订单号" prop="orderId">
              <el-input oninput="value=value.replace(/[^\d]/g,'')" style="width: 120px" v-model="create.orderId"
                size="mini"></el-input>
            </el-form-item> -->
            <div>
              <el-form-item label="会员姓名" label-width="80px">
                <el-input style="width: 120px" disabled size="mini" v-model="memberName"></el-input>
              </el-form-item>
              <el-form-item label="卡类型" prop="cardType" label-width="80px">
                <!-- <el-input
                style="width: 120px"
                v-model="create.cardNumberType"
                size="mini"
              ></el-input> -->
                <el-select v-model="create.cardType" size="mini" style="width: 120px" clearable>
                  <el-option v-for="(item, index) in cardList" :key="index" :label="item.cardSectionName"
                    :value="item.cardId">
                  </el-option>
                </el-select>
              </el-form-item>
            </div>
            <div>
              <el-form-item label="工单标题" prop="caseSubject" label-width="80px">
                <el-input type="text" :rows="2" style="width: 120px" v-model="create.caseSubject" size="mini">
                </el-input>
              </el-form-item>
              <el-form-item label="工单分类" prop="caseTypeId" label-width="80px">
                <el-select v-model="create.caseTypeId" size="mini" style="width: 120px" clearable>
                  <el-option v-for="item in orderLedger" :key="item.value" :label="item.caseTypeName"
                    :value="item.caseTypeId">
                  </el-option>
                </el-select>
              </el-form-item>
            </div>
            <el-form-item label="工单类型" prop="caseType" label-width="80px">
              <el-select v-model="create.caseType" size="mini" style="width: 120px" clearable>
                <el-option v-for="item in mold" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="工单小类" prop="caseSubType" label-width="80px">
              <el-select v-model="create.caseSubType" size="mini" style="width: 120px" clearable>
                <el-option v-for="item in workOrderTypeList" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <div>
              <el-form-item label="已理赔次数"  label-width="93px">
                <el-input v-model="create.claimsSettled" size="mini" type="number" style="width: 120px"></el-input>
              </el-form-item>
              <span class="red">有关联工单类型：保险理赔时显示</span>
            </div>
            <div class="pop-1">
              <el-form-item label="工单内容" prop="caseContent" label-width="80px">
                <el-input type="textarea" :rows="2" style="width: 329px" v-model="create.caseContent">
                </el-input>
              </el-form-item>

            </div>
            <div class="pop-1">
              <el-form-item label="处理结果" prop="caseContent" label-width="80px">
                <el-input type="textarea" :rows="2" style="width: 329px" v-model="create.solveContent ">
                </el-input>
              </el-form-item>

            </div>
            <!-- <el-form-item label="创建部门" prop="departId" label-width="80px">
              <el-select v-model="create.departId" size="mini" style="width: 120px" clearable @change="selectMent()">
                <el-option v-for="(item, index) in gongdanList" :key="index" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="创建人" prop="createEmployeeId" label-width="80px">
              <el-select v-model="create.createEmployeeId" size="mini" style="width: 120px" clearable>
                <el-option v-for="item in postslists" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item><br /> -->








            <el-form-item label="接收部门" prop="receivingDepartment" label-width="80px">
              <el-select v-model="create.receivingDepartment" size="mini" style="width: 120px" clearable
                @change="selectMent()">
                <el-option v-for="(item, index) in gongdanList" :key="index" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <!-- <el-form-item
              label="接收岗位"
              prop="receivePost"
              label-width="80px"
            >
              <el-select
                v-model="create.receivePost"
                size="mini"
                style="width: 120px"
                clearable
              >
                <el-option
                  v-for="(item, index) in PositionDown"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item> -->
            <el-form-item label="接收人员" prop="receiver" label-width="80px">
              <el-select v-model="create.receiver" size="mini" style="width: 120px" clearable>
                <el-option v-for="item in postslists" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="紧急程度" prop="receiver" label-width="80px">
              <el-select clearable v-model="create.pri" size="mini" style="width: 120px">
                <el-option v-for="item in urgency" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="业务类型" label-width="80px">
              <el-select v-model="create.orderType" size="mini" style="width: 120px" clearable>
                <el-option v-for="item in ordertype" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="订单号" label-width="80px">
              <el-input v-model="create.orderId" size="mini" style="width: 120px"></el-input>
            </el-form-item>
            <el-form-item label="客户指定完成时间" prop="specifiedTime" label-width="135px">
              <el-date-picker :value-format="format1" size="mini" style="width: 140px" v-model="create.specifiedTime"
                type="date" placeholder="选择日期">
              </el-date-picker>
            </el-form-item><br />
            <el-form-item>
              <el-button size="mini" style="
                  width: 110px;
                  font-size: 10px
                  color: #fff;
                  height: 30px;
                  background-color: #f6b23e" @click="getbackGuaranteeCase('create')">确认</el-button>
              <el-button @click="dialogVisible = false" size="mini" type="primary" style="width: 110px; height: 30px">取消
              </el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-dialog>
      <!-- 工单列表上按钮 -->
      <div class="header-1">
        <div class="tuo">
          <div class="tuo-1">
            <div class="tuo-2"></div>
            <span>工单列表</span>
          </div>
          <div class="tuo-3">
            <!-- create dialogVisible-->
            <el-button @click="dialogVisiblecreate" size="mini" style="
                width: 120px;
                font-size: 10px;
                color: #fff;
                height: 30px;
                background-color: #f6b23e;
              ">创建工单</el-button>
          </div>
        </div>
        <!-- 订单列表 -->
        <div class="table">
          <el-table border size="mini" ref="multipleTable" :data="Therepairorder" :header-cell-style="{
              color: '#fff',
              background: '#6090EC',
              fontSize: '11px',
              fontWeight: 'normal',
            }" :row-style="{ height: '40px' }" tooltip-effect="dark" style="width: 100%">
            <el-table-column prop="caseId" label="工单号" width="100">
            </el-table-column>
            <el-table-column prop="caseType" label="工单类型" width="144">
              <template slot-scope="scope">
                <template v-if="scope.row.caseType=='claim'">理赔</template>
                <!-- <template
                v-for="(item, index) in workOrderType"
                v-if="scope.row.caseType == item.value"
              >
                {{ item.label }}
              </template> -->
              </template>
            </el-table-column>
            <el-table-column prop="caseTypeName" label="工单分类" width="144">
            </el-table-column>
            <el-table-column prop="caseSubject" label="工单标题" width="84">
            </el-table-column>
            <el-table-column prop="caseContent" label="工单内容" width="150">
            </el-table-column>
            <el-table-column prop="createEmployeeName" label="创建人" width="84">
            </el-table-column>
            <el-table-column prop="deptName" label="创建部门" width="84">
            </el-table-column>
            <el-table-column prop="caseCreateTime" label="创建时间" width="120">
            </el-table-column>
            <el-table-column prop="receivingDepartment" label="接收部门" width="112">
            </el-table-column>
            <!-- <el-table-column prop="receivePost" label="接受岗位" width="110">
            </el-table-column> -->
            <el-table-column prop="receiver" label="接收人" width="110">
            </el-table-column>
            <el-table-column prop="orderType" label="订单类型" width="114">
              <template slot-scope="scope">
                <template v-if="scope.row.orderType == 'hotel'">酒店</template>
                <template v-if="scope.row.orderType == 'fight'">机票</template>
                <template v-if="scope.row.orderType == 'service'">贵宾厅</template>
                <template v-if="scope.row.orderType == 'train'">火车票</template>
                <template v-if="scope.row.orderType == 'customer'">会员</template>
                <template v-if="scope.row.orderType == '机票'">机票</template>
              </template>
            </el-table-column>
            <el-table-column prop="orderId" label="订单号" width="155">
            </el-table-column>
            <el-table-column prop="pri" label="紧急" width="70">
              <template slot-scope="scope">
                <template>
                  {{ scope.row.pri == "0" ? "普通" : "紧急" }}
                </template>
              </template>
            </el-table-column>
            <el-table-column prop="caseTypeName" label="工单类型" width="100">
              <!-- <template slot-scope="scope">
                <template>
                  {{ scope.row.pri == "0" ? "普通" : "紧急" }}
                </template>
              </template> -->
            </el-table-column>
            <el-table-column prop="caseStatus" label="状态" width="80">
              <template slot-scope="scope">
                <template>
                  {{
                    scope.row.caseStatus == "1"
                      ? "处理完"
                      : scope.row.caseStatus == "2"
                      ? "废弃"
                      : "待处理"
                  }}
                </template>
              </template>
            </el-table-column>
            <el-table-column prop="name" label="操作" width="110">
              <template slot-scope="scope">
                <el-button size="mini" style="background-color: #6090ec; color: #fff"
                  @click="Workorderdetails(scope.row)">详情</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <!-- 详情 -->
        <el-dialog title="工单管理-工单详情" :visible.sync="details" :close-on-click-modal="false" width="55%">
          <div class="add">
            <div class="header-1">
              <div class="header-1-1-1">
                <div class="tou"></div>
                <span>工单详情</span>
              </div>
            </div>
            <el-form style="margin-left: 20px" size="mini" :inline="true" :data="particulars" :model="particulars"
              class="pop">
              <div class="pop-1">
                <div class="pop-1-2">
                  <div class="pop-9">会员卡类型</div>

                  <el-select v-model="particulars.cardNumberType" size="mini" style="width: 120px" clearable>
                    <el-option v-for="(item, index) in cardList" :key="index" :label="item.cardSectionName"
                      :value="item.cardId">
                    </el-option>
                  </el-select>
                </div>
              </div>
              <div class="pop-2">
                <div class="pop-1">
                  <div class="pop-1-2">
                    <div class="pop-9">会员姓名</div>
                    <el-input style="width: 120px" size="mini" v-model="particulars.memberName"></el-input>
                  </div>
                </div>
                <div class="pop-1">
                  <div class="pop-1-2">
                    <div class="pop-9">会员手机</div>
                    <el-input style="width: 120px" size="mini" v-model="particulars.memberCellPhone">
                    </el-input>
                  </div>
                </div>
              </div>
              <div class="pop-2">
                <div class="pop-1">
                  <div class="pop-1-2">
                    <div class="pop-9">工单标题</div>
                    <el-input style="width: 120px" v-model="particulars.ticketTitle" size="mini"></el-input>
                  </div>
                </div>
                <div class="pop-1">
                  <div class="pop-1-2">
                    <div class="pop-9">工单分类</div>
                    <el-select v-model="particulars.caseTypeId" size="mini" style="width: 120px" clearable>
                      <el-option v-for="item in orderLedger" :key="item.value" :label="item.caseTypeName"
                        :value="item.caseTypeId">
                      </el-option>
                    </el-select>
                  </div>
                </div>
              </div>
              <div class="pop-2">
                <div class="pop-1">
                  <div class="pop-1-2">
                    <div class="pop-9">业务类型</div>
                    <el-select v-model="particulars.ticketType" size="mini" style="width: 120px" clearable disabled>
                      <el-option v-for="item in mold" :key="item.value" :label="item.label" :value="item.value">
                      </el-option>
                    </el-select>
                    <!-- <el-input disabled style="width: 120px" size="mini" v-model="particulars.ticketType"></el-input> -->
                  </div>
                </div>
                <div class="pop-1">
                  <div class="pop-1-2">
                    <div class="pop-9">工单小类</div>
                    <el-select v-model="particulars.workOrderSubclass" size="mini" style="width: 120px" clearable>
                      <el-option v-for="item in workOrderTypeList" :key="item.value" :label="item.label"
                        :value="item.value">
                      </el-option>
                    </el-select>
                    <!-- <el-input disabled style="width: 120px" size="mini" v-model="particulars.workOrderSubclass">
                    </el-input> -->
                  </div>
                </div>
              </div>
              <div class="pop-1">
                <div class="pop-1-2">
                  <div class="pop-9">工单内容</div>
                  <el-input :autosize="{ minRows: 12, maxRows: 12 }" style="width: 313px"
                    v-model="particulars.workOrderContent"></el-input>
                </div>
              </div>
              <div class="pop-1">
                <div class="pop-1-2">
                  <div class="pop-9">处理结果</div>
                  <el-input :autosize="{ minRows: 12, maxRows: 12 }" style="width: 313px"
                    v-model="particulars.solveContent"></el-input>
                </div>
              </div>
              <div class="pop-2">
                <div class="pop-1">
                  <div class="pop-1-2">
                    <div class="pop-9">接收部门</div>
                    <el-select v-model="particulars.receiveDepartmentId" size="mini" style="width: 120px" clearable>
                      <el-option v-for="(item, index) in gongdanList" :key="index" :label="item.label"
                        :value="item.value">
                      </el-option>
                      <!-- <el-option
                  v-for="(item,index) in PositionDown"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option> -->
                    </el-select>
                  </div>
                </div>
                <!-- <div class="pop-1">
                  <div class="pop-1-2">
                    <div class="pop-9">接收岗位</div>
                    <el-select
                      v-model="particulars.receivePostId"
                      size="mini"
                      style="width: 120px"
                      clearable
                    >
                      <el-option
                        v-for="(item, index) in PositionDown"
                        :key="index"
                        :label="item.label"
                        :value="item.value"
                      >
                      </el-option>
                    </el-select>
                  </div>
                </div> -->
                <div class="pop-1">
                  <div class="pop-1-2">
                    <div class="pop-9">接收人</div>
                    <el-select v-model="particulars.receiverId" size="mini" style="width: 120px" clearable>
                      <el-option v-for="item in postslistsed" :key="item.value" :label="item.label" :value="item.value">
                      </el-option>
                    </el-select>
                  </div>
                </div>
              </div>
              <div class="pop-2">
                <div class="pop-1">
                  <div class="pop-1-2">
                    <div class="pop-9">&nbsp;紧急程度</div>
                    <el-select clearable v-model="particulars.emergencyLevel" size="mini" style="width: 120px">
                      <el-option v-for="item in urgency" :key="item.value" :label="item.label" :value="item.value">
                      </el-option>
                    </el-select>
                  </div>
                </div>
                <div class="pop-2">
                  <div class="pop-1">
                    <div class="pop-1-2">
                      <div class="pop-9">&nbsp;状态</div>
                      <el-select clearable v-model="particulars.workOrderStatus" size="mini" placeholder="请选择"
                        style="width: 120px">
                        <el-option v-for="item in condition" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                      </el-select>
                    </div>
                  </div>
                </div>
                <div class="pop-1">
                  <div class="pop-1-2">
                    <div class="pop-9">订单号</div>
                    <el-input style="width: 120px" size="mini" v-model="particulars.relevantOrderNumber">
                    </el-input>
                  </div>
                </div>
              </div>
              <div class="pop-1">
                <!-- <div class="pop-1-2">
                  <div class="pop-9">创建部门</div>
                  <el-input  style="width: 120px" v-model="particulars.createCepartment" size="mini"></el-input>
                </div>
                <div class="pop-1-2">
                  <div class="pop-9">创建人</div>
                  <el-input disabled style="width: 120px" v-model="particulars.founder" size="mini"></el-input>
                </div> -->
                <div class="pop-1-2">
                  <div style="width: 126px; line-height: 28px">
                    客户指定完成时间
                  </div>
                  <el-date-picker :value-format="format1" size="mini" style="width: 140px"
                    v-model="particulars.specifiedTime" type="date" placeholder="选择日期">
                  </el-date-picker>
                </div>
              </div>
              <div class="pop-3">
                <el-button @click="transferrepair" type="primary" style="color: #fff; width: 66px" size="mini">转移
                </el-button>
                <el-button @click="abandoned" type="primary" style="color: #fff; width: 66px" size="mini">废弃
                </el-button>
                <el-button @click="getcaseeditCase()" style="color: #fff; width: 66px" size="mini" type="primary">保存
                </el-button>
              </div>
            </el-form>
          </div>
        </el-dialog>

        <!-- 工单转移 -->
        <el-dialog title="工单管理-工单转移" :visible.sync="transfer" width="40%" :close-on-click-modal="false">
          <div class="add">
            <div class="header-1">
              <div class="header-1-1-1">
                <div class="tou"></div>
                <span>工单转移</span>
              </div>
            </div>
            <el-form style="margin-left: 20px" size="mini" :inline="true" :data="particulars" :model="particulars"
              class="pop">
              <div class="pop-2">
                <div class="pop-1">
                  <div class="invoice-1">
                    <span class="invoice-9">接收人</span>
                    <el-select v-model="employeeId" size="mini" style="width: 120px" clearable>
                      <el-option v-for="item in postslists" :key="item.value" :label="item.label" :value="item.value">
                      </el-option>
                    </el-select>
                  </div>
                </div>
              </div>
              <div class="pop-3">
                <el-button style="color: #fff; width: 66px" size="mini" type="primary" @click="WorkersChanBaoCun">保存
                </el-button>
                <el-button @click="transfer = false" style="color: #fff; width: 66px" size="mini" type="primary">取消
                </el-button>
              </div>
            </el-form>
          </div>
        </el-dialog>
      </div>
      <!-- 分页 -->
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
        :page-sizes="[10, 15, 20]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
        :total="pageTotal">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  export default {
    name: "newlyincreased",
    data() {
      return {
        createEmployeeId: "",
        departId: "",
        transfer: "",
        employeeId: null,
        caseIdzy: null,
        format: "yyyy-MM-dd",
        format1: "yyyy-MM-dd HH:mm:ss",
        // 分页
        a: "",
        pageSize: 10,
        currentPage: 1,
        pageTotal: 0,

        CX: {
          date1: new Date(new Date() - (3600 * 1000 * 24 * 7 + 1000))
            .toLocaleDateString()
            .replace(/\//g, "-"), //   日期时间
          date2: new Date(new Date().getTime() +86400000).toLocaleDateString().replace(/\//g, "-"),
        },
        // 工单下拉
        gongdanList: [],
        // 状态待处理 = 0,处理完 = 1,
        condition: [{
            value: 0,
            label: "待处理",
          },
          {
            value: 1,
            label: "处理完",
          },
          {
            value: 2,
            label: "废弃",
          },
        ],
        value: "",
        // 工单类型
        mold: [{
            value: "ordinary",
            label: "普通",
          },
          {
            value: "derelictionDuty",
            label: "渎失职",
          },
          {
            value: "claim",
            label: "理赔",
          },
          {
            value: "complaint",
            label: "投诉",
          },
        ],
        // 订单类型
        ordertype: [{
            value: "fight",
            label: "机票",
          },
          {
            value: "train",
            label: "火车票",
          },
          {
            value: "hotel",
            label: "酒店",
          },
          {
            value: "cudtormer",
            label: "会员",
          },
          {
            value: "service",
            label: "贵宾厅",
          },
        ],
        // 工单小类
        workOrderTypeList: [],
        // 人员下拉
        postslists: [],
        // 职位下拉
        PositionDown: [],
        // 工单分类
        orderLedger: [],
        // 紧急状态
        urgency: [{
            value: 0,
            label: "普通",
          },
          {
            value: 1,
            label: "紧急",
          },
        ],
        // 会员卡类型
        cardtypeList: [{
            value: 0,
            label: "白银会员",
          },
          {
            value: 1,
            label: "黄金会员",
          },
          {
            value: 2,
            label: "黑金会员·健康卡",
          },
          {
            value: 3,
            label: "黑金会员·出行卡",
          },
        ],
        // 工单转移
        transfer: false,
        // 查询
        Thequery: {
          caseId: "",
          caseStatus: "",
          afterTime: "",
          agoTime: "",
          orderId: "",
          orderType: "",
          customerId: "",
          phone: "",
        },
        // 工单列表
        Therepairorder: [],
        // 创建工单
        memberName: null,
        create: {
          createEmployeeId: null,
          departId: null,
          cardNumberType: null,
          memberName: null,
          memberCellPhone: null,
          cardType: "",
          caseSubject: "",
          caseType: "",
          caseSubType: "",
          caseContent: "",
          solveContent: "",
          receivingDepartment: "",
          receivePost: "",
          receiver: "",
          pri: "",
          orderType: "",
          specifiedTime: "",
          claimsSettled: null,
          orderId: null,
          caseTypeId: "",
        },
        CreateWorkOrder: {
          cardType: [{
            required: true,
            message: "请选择",
            trigger: "change",
          }, ],
          caseTypeId: [{
            required: true,
            message: "请选择",
            trigger: "change",
          }, ],



          createEmployeeId: [{
            required: true,
            message: "请选择创建人",
            trigger: "change",
          }, ],
          departId: [{
            required: true,
            message: "请选创建部门",
            trigger: "change",
          }, ],

          memberCellPhone: [{
            required: true,
            message: "请输入手机号",
            trigger: "change",
          }, ],
          receivingDepartment: [{
            required: true,
            message: "请选择接受部门",
            trigger: "change",
          }, ],
          caseSubType: [{
            required: true,
            message: "请选择",
            trigger: "change",
          }, ],
          claimsSettled: [{
            required: true,
            message: "请输入",
            trigger: "change",
          }, ],
          specifiedTime: [{
            required: true,
            message: "请输入",
            trigger: "change",
          }, ],
          caseSubject: [{
            required: true,
            message: "请输入工单标题",
            trigger: "change",
          }, ],
          caseType: [{
            required: true,
            message: "请选择工单类型",
            trigger: "change",
          }, ],
          cardcaseSubTypeType: [{
            required: true,
            message: "请先选择部门",
            trigger: "change",
          }, ],
          caseContent: [{
            required: true,
            message: "请输入工单内容",
            trigger: "change",
          }, ],
          receivingDepartment: [{
            required: true,
            message: "请选择接受部门",
            trigger: "change",
          }, ],
          // receivePost: [
          //   {
          //     required: true,
          //     message: "请选择接收岗位",
          //     trigger: "change",
          //   },
          // ],
          receiver: [{
            required: true,
            message: "请输入接收人",
            trigger: "change",
          }, ],
          pri: [{
            required: true,
            message: "请输入紧急程度",
            trigger: "change",
          }, ],
          orderType: [{
            required: true,
            message: "请选择订单类型",
            trigger: "change",
          }, ],
          orderId: [{
            required: true,
            message: "请输入订单号",
            trigger: "change",
          }, ],
          type: [{
            required: true,
            message: "请传入类型",
            trigger: "change",
          }, ],
        },
        // 工单详情
        particulars: [],
        details: false,
        dialogVisible: false,
        // 卡类型列表
        cardList: [],
        postslistsed: [],
      };
    },
    methods: {
      // 废弃按钮
      abandoned() {
        this.$axios
          .getcaseeditCase({
            caseId: this.caseIdzy,
            cardTypeId: this.particulars.cardNumberType,
            customerName: this.particulars.memberName,
            customerMobile: this.particulars.memberCellPhone,
            //  positionId: this.particulars.receivePost,
            caseSubject: this.particulars.ticketTitle,
            caseContent: this.particulars.workOrderContent,
            caseType: this.particulars.ticketType,
            createEmployeeId: this.particulars.founder,
            caseRequireFinishTime: this.particulars.specifiedTime,
            orderId: this.particulars.relevantOrderNumber,
            caseStatus: 2,
          })
          .then((res) => {
            console.log(res);
            if (res.code == "200") {
              this.$message({
                message: "保存成功",
                type: "success",
              });
              this.getbackGuaranteeCquery();
              this.details = false;
            }
          });
      },

      WorkersChanBaoCun() {
        let arr = {
          ids: [this.caseIdzy],
          employeeId: this.employeeId,
        };
        if (this.employeeId != null) {
          localStorage.setItem("isToken", true);
          this.$axios.gettransferCount(arr).then((res) => {
            
            console.log(res);
            if (res.code == 200) {
              this.transfer = false;
              this.details = false;
              this.getbackGuaranteeCquery();
              this.$message({
                message: res.data[0].msg,
                type: "success",
              });
            } else {
              this.$message({
                message: "转移失败！！！！！",
                type: "warning",
              });
            }
          });
        } else {
          this.$message({
            message: "请选择转移人员",
            type: "warning",
          });
        }
      },
      transferrepair() {
        //  this.caseIdzy=null
        this.employeeId = null;
        this.transfer = true;
      },
      getnameAndPhone() {
        // debugger
        if (this.memberName != null || this.create.memberCellPhone != null) {
          this.$axios
            .getcustomerId({
              // name: this.memberName,
              customerPhone: this.create.memberCellPhone,
            })
            .then((res) => {
              console.log(res);
              if (res.code == 200) {
                console.log(res);
                this.memberName = res.data.customerName;
                this.create.cardType = Number(res.data.level);
                this.create.memberCellPhone = res.data.customerPhone;
                // if (res.data.cardType == "黑金会员·健康卡") {
                //   // debugger
                //   this.create.cardNumberType = 2;
                // } else if (res.data.cardType == "白银会员") {
                //   this.create.cardNumberType = 0;
                // } else if (res.data.cardType == "黄金会员") {
                //   this.create.cardNumberType = 1;
                // } else if (res.data.cardType == "黑金会员·出行卡") {
                //   this.create.cardNumberType = 3;
                // }
              }
            });
        } else {
          this.$message({
            message: "请输入手机号或姓名查询会员信息！！",
            type: "warning",
          });
        }
      },
      // 修改
      getcaseeditCase() {
        this.$axios
          .getcaseeditCase({
            caseId: this.caseIdzy,
            cardTypeId: this.particulars.cardNumberType,
            customerName: this.particulars.memberName,
            customerMobile: this.particulars.memberCellPhone,
            //  positionId: this.particulars.receivePost,
            caseSubject: this.particulars.ticketTitle,
            caseContent: this.particulars.workOrderContent,
            solveContent: this.particulars.solveContent,
            caseType: this.particulars.ticketType,
            createEmployeeId: this.particulars.founder,
            caseRequireFinishTime: this.particulars.specifiedTime,
            orderId: this.particulars.relevantOrderNumber,
            caseStatus: this.particulars.workOrderStatus,
          })
          .then((res) => {
            console.log(res);
            if (res.code == "200") {
              this.$message({
                message: "保存成功",
                type: "success",
              });
              this.getbackGuaranteeCquery();
              this.details = false;
            }
          });
      },
      // 会员卡类型
      getcardlist() {
        this.$axios.getcardlist({}).then((res) => {
          console.log(res);
          if (res.code == 200) {
            this.cardList = res.data;
          }
        });
      },
      dialogVisiblecreate() {
        this.create = {};
        // this.create.orderId=''
        this.dialogVisible = true;
      },
      // 选中部门查询工单小类
      departmentChange() {
        this.$axios
          .getselectworkOrderType({
            // deptId:this.create.receivingDepartment,
          })
          .then((res) => {
            console.log(res);
            if (res.code == "200") {
              let list = JSON.parse(JSON.stringify(res.data));
              this.workOrderTypeList = list.map((item) => {
                return {
                  label: item.workOrderType,
                  value: item.caseSubTypeId,
                };
              });
              console.log(this.workOrderTypeList);
            }
          });
      },
      //分页
      handleSizeChange(value) {
        console.log("1", value);
        localStorage.setItem("pageSize", value);
        localStorage.setItem("pageNum", 1);
        this.getbackGuaranteeCaseById();
        this.pageSize = value;
      },
      handleCurrentChange(value) {
        console.log("2", value);
        localStorage.setItem("pageNum", value);
        localStorage.setItem("pageSize", this.pageSize);
        this.getbackGuaranteeCaseById();
        // orders = res.data;
      },
      search() {
        localStorage.setItem("pageNum", this.currentPage);
        localStorage.setItem("pageSize", 10);
        this.getbackGuaranteeCaseById();
      },
      getbackGuaranteeCquery() {
        localStorage.setItem("pageSize", 10);
        localStorage.setItem("pageNum", 1);
        this.getbackGuaranteeCaseById();
      },
      // 查询工单
      getbackGuaranteeCaseById() {
        this.$axios
          .getbackGuaranteeCaseById({
            caseId: this.Thequery.caseId,
            caseStatus: this.Thequery.caseStatus,
            afterTime: this.CX.date1 ? this.CX.date1 : "",
            agoTime: this.CX.date2 ? this.CX.date2 : "",
            orderId: this.Thequery.orderId,
            orderType: this.Thequery.orderType,
            customerId: this.Thequery.customerId,
            phone: this.Thequery.phone,
            type: this.Thequery.orderType,
          })
          .then((res) => {
            console.log(res);
            if (res.code == "200") {
              // 工单列表数据
              this.Therepairorder = res.data;
              this.pageTotal = res.total;
            }
          });
      },
      gettransferCount() {
        this.transfer = true;
        console.log(this.particulars);
      },
      // 创建工单
      getbackGuaranteeCase(formName) {
        localStorage.setItem("isToken", true);
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.$axios
              .getbackGuaranteeCase({
                // 会员手机号
                customerPhone: this.create.memberCellPhone,
                customerName: this.memberName,
                cardNum: "",
                createEmployeeIdthis: this.create.createEmployeeId,
                departId: this.create.departId,
                // 卡类型 memberName
                cardType: this.create.cardType,
                // 工单标题
                caseSubject: this.create.caseSubject,
                // // 工单类型
                caseType: this.create.caseType,
                // 工单小类
                caseSubType: this.create.caseSubType,
                // 工单内容
                caseContent: this.create.caseContent,
                solveContent: this.create.solveContent,
                // 接收部门
                receivingDepartment: this.create.receivingDepartment,
                // 接收岗位 receivePost  receiver
                // receivePost: this.create.receivePost,
                // 接受人
                receiver: this.create.receiver,
                // 紧急程度
                pri: this.create.pri,
                // 订单类型 orderType
                orderType: this.create.orderType,
                // 客户指定完成时间 specifiedTime claimsSettled orderId workOrderType
                type: "Crm",
                workOrderType: this.create.caseType,
                specifiedTime: this.create.specifiedTime,
                // 已理赔次数
                claimsSettled: this.create.claimsSettled,
                // 订单号
                orderId: this.create.orderId,
                caseTypeId: this.create.caseTypeId,
              })
              .then((res) => {
                

                console.log(res);
                if (res.code == "200") {
                  this.dialogVisible = false;
                  // this.create={}
                  this.$axios
                    .getbackGuaranteeCaseById({
                      caseId: "",
                      caseStatus: "",
                      afterTime: "",
                      agoTime: "",
                      orderId: "",
                      orderType: "",
                      customerId: "",
                      phone: "",
                      type: "",
                    })
                    .then((res) => {
                      console.log(res);
                      if (res.code == "200") {
                        // 工单列表数据
                        this.Therepairorder = res.data;
                        this.pageTotal = res.total;
                      }
                    });
                  this.$message({
                    message: "创建成功",
                    type: "success",
                  });
                } else {
                  this.$message.error("请填写正确的工单信息");
                }
              });
          } else {
            console.log("error submit!!");
            return false;
          }
        });
      },
      // 工单详情
      Workorderdetails(row) {
        console.log(row);
        this.getbackGuaranteeById(row.caseId);
        this.caseIdzy = row.caseId;
      },
      getbackGuaranteeById(id) {
        this.$axios
          .getbackGuaranteeById({
            caseId: String(id),
          })
          .then((res) => {
            console.log(res);
            if (res.code == "200") {
              this.details = true;
              // 工单列表数据
              this.particulars = res.data;
              this.particulars.solveContent = res.data.solveContent;

              console.log(this.particulars);
              this.particulars.workOrderSubclass = Number(
                this.particulars.workOrderSubclass
              );

              this.particulars.emergencyLevel = Number(
                this.particulars.emergencyLevel
              );
              this.particulars.workOrderStatus = Number(
                this.particulars.workOrderStatus
              );

              this.particulars.receiveDepartmentId = Number(
                this.particulars.receiveDepartmentId
              );
              this.particulars.receivePostId = Number(
                this.particulars.receivePostId
              );
              this.particulars.receiverId = Number(this.particulars.receiverId);
              this.particulars.cardNumberType = Number(
                this.particulars.cardNumberId
              );
            }
          });
        this.particulars = {};
      },
      // 接收部门
      geteedepartmentlist() {
        this.$axios.geteedepartmentlist({}).then((res) => {
          console.log(res);
          if (res.code == "200") {
            let list = JSON.parse(JSON.stringify(res.data));
            this.gongdanList = list.map((item) => {
              return {
                label: item.deptName,
                value: item.deptId,
              };
            });
            console.log(this.gongdanList);
          }
        });
      },
      // 通过当前部门id查询员工
      selectMent() {
        this.postslist();
        this.getAll();
      },

      // 接受人员搜索员工
      postslist() {
        localStorage.removeItem("pageSize");
        localStorage.removeItem("pageNum");
        this.$axios
          .postslist({
            deptId: this.create.receivingDepartment,
          })
          .then((res) => {
            localStorage.setItem("pageSize", 10);
            localStorage.setItem("pageNum", 1);
            console.log(res);
            if (res.code == "200") {
              let list = JSON.parse(JSON.stringify(res.data));
              this.postslists = list.map((item) => {
                return {
                  label: item.employeeName,
                  value: item.employeeId,
                };
              });
              this.postslistsed = list.map((item) => {
                return {
                  label: item.employeeName,
                  value: item.employeeId,
                };
              });
              console.log(this.postslists);
            }
          });
      },

      // 职位下拉列表
      getAll() {
        this.$axios
          .getAll({
            deptId: this.create.receivingDepartment,
          })
          .then((res) => {
            console.log(res);
            if (res.code == "200") {
              let list = JSON.parse(JSON.stringify(res.data));
              this.PositionDown = list.map((item) => {
                return {
                  label: item.positionName,
                  value: item.positionId,
                };
              });
            }
          });
      },

      // 工单分类列表
      getlists() {
        this.$axios.getlists({}).then((res) => {
          if (res.code == "200") {
            console.log(res);
            this.orderLedger = res.data;
          }
        });
      },
    },
    mounted() {
      if (this.$route.params.row) {
        this.Workorderdetails(this.$route.params.row);
      }
      this.departmentChange();
      // 接收人员
      this.postslist();

      this.getAll();
      // 查询工单
      this.getbackGuaranteeCaseById();
      // 接收部门
      this.geteedepartmentlist();
      // 工单小类
      this.departmentChange();
      // 职位下拉列表
      this.getcardlist();
      // 工单分类列表
      this.getlists();
    },
  };
</script>
<style scoped>
  .newlyincreased {
    height: 100%;
    background-color: #f7f7f7;
  }

  .header-1-1 {
    font-weight: bolder;
    display: flex;
    margin-left: 20px;
    padding-top: 20px;
  }

  .header-1-1-1 {
    font-weight: bolder;
    display: flex;
    margin-left: 20px;
    /* padding-top: 20px; */
  }

  .tou {
    width: 3.5px;
    height: 17px;
    background-color: #4b71bf;
    margin-top: 2px;
    margin-right: 4px;
    font-size: 12px;
    margin-bottom: 25px;
  }

  .tuo {
    font-weight: bolder;
    display: flex;
    margin-left: 20px;
    padding-top: 20px;
    justify-content: space-between;
    margin-right: 20px;
  }

  .tuo-1 {
    display: flex;
  }

  .tuo-2 {
    width: 3.5px;
    height: 17px;
    background-color: #4b71bf;
    margin-top: 2px;
    margin-right: 4px;
    font-size: 12px;
    margin-bottom: 25px;
  }

  .invoice-9 {
    font-size: 11px;
  }

  .invoice {
    margin: auto;
    display: flex;
    height: 44px;
    margin-bottom: 20px;
    min-width: 1200px;
  }

  .invoice-1 {
    margin-right: 20px;
  }

  .invoice-2 {
    margin-left: 20px;
  }

  .hackhome {
    border-top: 1px solid #e0e0e0;
    width: 98%;
    margin-left: 20px;
  }

  .botton {
    margin-left: 20px;
    margin-top: 10px;
    margin-bottom: 20px;
    min-width: 980px;
  }

  .table {
    margin-left: 20px;
    margin-right: 20px;
  }

  .top-6 {
    display: flex;
  }

  .tou-3 {
    display: flex;
  }

  #selectForm>>>.el-form-item__label {
    font-size: 11px;
  }

  .pop-9 {
    font-size: 11px;
    width: 80px;
    padding-top: 5px;
  }

  .pop {
    margin-left: 20px;
  }

  .pop-1 {
    display: flex;
  }

  .pop-1-2 {
    display: flex;
    margin-bottom: 12px;
    margin-right: 10px;
  }

  .pop-2 {
    display: flex;
  }

  .pop-3 {
    margin-left: 20px;
    margin-top: 40px;
  }

  .fddfd {
    display: flex;
  }

  .red {
    color: #ff0000;
    font-weight: bolder;
    font-size: 11px;
    line-height: 41px;
  }
</style>